<%-- Created by IntelliJ IDEA.Date: 2022/3/22
Time: 23:49 To change
this template use File | Settings | File Templates. --%> <%@ page
contentType="text/html;charset=UTF-8" language="java" %>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>团队展示</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="UTF-8" />
    <meta name="keywords" content="" />

    <!--// Meta tag Keywords -->
    <!-- css files -->
    <link
      rel="stylesheet"
      href="${path}/static/bootstrap/css/bootstrap.css"
      type="text/css"
      media="all"
    />
    
    <link
      rel="stylesheet"
      href="${path}/static/css/user/font-awesome.css"
      type="text/css"
      media="all"
    />
    <style>
      button#save_apply_btn {
      background-color: #f7c7ff;
      height: 30px;
      width: 60px;
      margin-top: 20px;
      margin-left: 348px;
    }
    .col-sm-9{
        positon:relative;
        border: 1px solid;
        box-shadow: 2px 2px 2px rgb(0 0 0);
        margin-left: 250px;
    }

        /*--Contact--*/

    .contact-left h4,
    .contact-left h5 {
      text-align: left;
    }


    .address h4,
    .phone h4,
    .email h4 {
      margin-bottom: 10px;
      color: #00cdc1;
      font-weight: 600;
      font-size: 20px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .address h4 i,
    .phone h4 i,
    .email h4 i {
      color: #000;
      padding-right: 0.8em;
    }

    .email p a {
      color: #999;
    }

    .email p a:hover {
      color: #000;
    }

    .contact input[type='text'],
    .contact input[type='email'] {
      width: 47%;
      padding: 0.8em;
      background: transparent;
      border: none;
      border-bottom: 1px solid #000;
      margin: 1em 1em 1em 0;
      color: #000;
      outline: none;
      letter-spacing: 1px;
    }

    .contact textarea {
      width: 96.3%;
      border: none;
      border-bottom: 1px solid #000;
      resize: none;
      padding: 0.8em;
      height: 12em;
      margin-top: 1em;
      letter-spacing: 1px;
      outline: none;
    }

.contact input[type='submit'] {
  background: #ff3535;
  padding: 12px 50px;
  outline: none;
  margin-top: 1em;
  color: #fff;
  border: none;
  letter-spacing: 1px;
  font-size: 16px;
}

    .contact input[type='submit']:hover {
      background: #000;
    }
        .web_info{
            position: absolute;
            top: 30px;
            left: -150px;
            height: 390px;
            width: 300px;
            background: #0e0404;
        }

        #save_apply_form{
            margin-left: 180px;
        }
    </style>
  </head>
  <body>
    <jsp:include page="navigation.jsp"></jsp:include>
   
    <div class="contact" id="contact">
    <div class="container">

        <div class="col-md-9 col-sm-9 contact-right">
            <h3 style="text-align: center;margin: 20px 0">志愿者申请</h3>
            <div class="web_info">
                <h4 style="color: white;text-align: center;padding: 20px 0;">志愿申请说明</h4>
                <p style="color: white;font-size: 15px;padding: 25px 10px;">请您填入您的真实联系方式，有志愿活动时，我们将会以邮件的方式通知您，谢谢您的配合！</p>
                <p style="color: white;font-size: 15px;text-align: center;font-weight:700;">我们的联系方式</p>
                <p style="color: white;font-size: 15px;padding: 15px 0 15px 25px;"><i class="fa fa-envelope fa-fw"></i>&ensp;1378097264@qq.com</p>
                <p style="color: white;font-size: 15px;padding: 0 0 15px 25px;"><i class="fa fa-phone fa-fw"></i>&ensp;15113643917</p>
            </div>
            <form id="save_apply_form" >
                <input type="text" id="name" name="name" placeholder="你的名字" >
                <input type="text" id="email" name="email" placeholder="你的邮件号" >
                <input type="text" id="age" name="age" placeholder="你的年龄">
                <input type="text" id="telephone" name="telephone" placeholder="你的电话">
                <textarea name="message" id="message" placeholder=你想当志愿者的理由"></textarea>
            </form>
            <button type="button" id="save_apply_btn">提交</button>
        </div>
        
    </div>
</div>

<jsp:include page="footer.jsp"></jsp:include>

    <!-- //team -->
    <!-- js -->
    <script src="${path}/static/js/jquery-3.4.1.min.js"></script>
    <script src="${path}/static/bootstrap/js/bootstrap.min.js"></script>
    <!-- Necessary-JavaScript-File-For-Bootstrap -->
    <!-- //js -->
    <script type="text/javascript">
      //总的数据 当前的页面



        $("#save_apply_btn").click(function () {
          console.log($("#save_apply_form").serialize());
          $.ajax({
            url: "${path}/apply/create",
            type: "POST",
            data: $("#save_apply_form").serialize(),
            success: function (result) {
              alert("你的申请已经被提交");
              window.location.reload();
            },
            error: function (result) {
              alert("你提交的信息有错，请认真填写！");
              window.location.reload();
            },
          });
        });
    </script>
  </body>
</html>
